<template>
  <view class="detail">
    <view class="swiper-wrapper">
      <!--可悬浮按钮拖动 -->
      <view
        v-if="list.petShelfRecord.status === PET_STATUS.TOBEADOPT"
        @click="toBeAdopt"
      >
        <shinn-xSlideButton
          right="0"
          top="20%"
        >
          <view>
            <image
              src="../../static/detail/icon-adopt.gif"
              style="width: 95px; height: 104px"
            ></image>
          </view>
        </shinn-xSlideButton>
      </view>
      <swiper
        style="height: 450px"
        :indicator-dots="list.files.length > 1"
        indicator-color="rgba(255,255,255,0.5)"
        indicator-active-color="rgba(255,255,255,1)"
        @change="onChange"
      >
        <swiper-item
          v-for="(item, index) in list.files"
          :key="index"
          class="detail-swiper"
        >
          <view v-if="item.type === 'video'">
            <image
              v-if="!mute"
              src="../../static/detail/open.png"
              class="muteimage"
              @click="doMute(index)"
            ></image>
            <image
              v-else
              src="../../static/detail/mute.png"
              class="muteimage"
              @click="doMute(index)"
            ></image>
          </view>
          <view @click="previewImage(index)">
            <view
              v-if="item.type === 'video'"
              class="video-bg"
            >
              <view
                v-if="!isPlaying"
                class="video-icon"
                @click="togglePlayPause(index)"
              >
                <text
                  class="iconfont icon-zuojiantou is-video"
                  style="color: #fff; font-size: 12px"
                ></text>
              </view>

              <view class="video-cover"></view>
              <video
                :id="`video-${index}`"
                class="video"
                :src="item.url"
                :controls="controls"
                :muted="mute"
                :poster="`${item.poster}`"
                :autoplay="index === 0"
                @play="handlePlay"
                @pause="handlePause"
                @ended="handleEnded"
              ></video>
            </view>
            <!--            <image
              v-else
              class="image2"
              :src="item.poster"
              mode="aspectFit"
            /> -->
            <maya-image
              v-else
              class="image2"
              :src="item.poster"
              width="100%"
              height="450px"
              mode="aspectFit"
            ></maya-image>
            <image
              class="image1"
              :src="item.poster"
              mode="aspectFill"
            />
          </view>
        </swiper-item>
      </swiper>
      <!--捐赠滚动弹框-->
      <view
        v-if="list.petShelfRecord.status === PET_STATUS.CLOUD_ADOPT"
        class="donate-msg"
      >
        <pet-donate-msg :pet-id="list.petShelfRecord.id"></pet-donate-msg>
      </view>
      <view class="right-menu">
        <view
          class="love-count"
          @click="add"
        >
          <text
            class="iconfont"
            :class="
              list.petShelfRecord.hasThumbUp
                ? 'icon-dianzan active'
                : 'icon-aixin'
            "
            style="color: #fff; font-size: 26px"
          ></text>
          <view class="count">
            {{
              list.petShelfRecord && list.petShelfRecord.likeQty === 0
                ? '喜欢'
                : likeCountFilters(
                    list.petShelfRecord && list.petShelfRecord.likeQty
                  )
            }}
          </view>
        </view>
        <view class="share">
          <view class="share-title">
            <button
              open-type="share"
              class="share-btn"
            >
              <view
                class="iconfont icon-fenxiang"
                style="color: #fff; font-size: 26px; height: 44px"
              ></view>
              分享
            </button>
          </view>
        </view>
      </view>
    </view>
    <!--认养人的信息-->
    <view
      v-if="
        list.petShelfRecord.status === PET_STATUS.CLOUD_ADOPT &&
        list.petShelfRecord.cloudAdoptInfo !== null
      "
      class="adopt-information"
    >
      <view>
        <image
          src="../../static/detail/adopt-icon.png"
          style="width: 100%; height: 126px"
        ></image>
      </view>

      <view class="adopt-all">
        <image
          src="../../static/detail/avatar-icon.png"
          class="background-icon"
          style="width: 150px; height: 105px"
        ></image>
        <image
          :src="list.petShelfRecord.cloudAdoptInfo.userAvatar"
          style="width: 54px; height: 54px; border-radius: 54px"
          class="avatar"
        ></image>
        <view class="adopt-descript">
          <view>
            <text class="name">
              {{ list.petShelfRecord.cloudAdoptInfo.signName }}
            </text>
            <text class="name">正在守护它</text>
          </view>
          <view class="content">
            {{ list.petShelfRecord.cloudAdoptInfo.content }}
          </view>
        </view>
        <view class="adopt-days">
          <image
            src="../../static/detail/descript@2x.png"
            style="width: 100px; height: 21px"
          ></image>
          <view class="days-count">
            已守护{{ list.petShelfRecord.cloudAdoptInfo.adaptDays }}天
          </view>
        </view>
      </view>
    </view>

    <!--宠物基本详情-->
    <pet-detail
      :list="list.petShelfRecord"
      @onRefresh="getDetail()"
    ></pet-detail>
    <preview-file
      v-model="previewvisible"
      :file-list="list.files"
      :preview-index="previewIndex"
      pet-type="detail"
    ></preview-file>
  </view>
</template>

<script>
import {
  fetchShelfDetail,
  sendLike,
  sendCancelLike,
  selectSocialContent,
} from '@/api/detail.js';
import petDetail from './components/petDetail.vue';
import petDonateMsg from './components/petDonateMsg.vue';
import { likeCountFilters } from '@/utils/tools.js';
import { PET_STATUS } from '@/const/index.js';
import { mapGetters } from 'vuex';
import previewFile from './components/previewFile.vue';
export default {
  components: {
    petDetail,
    petDonateMsg,
    previewFile,
  },
  data() {
    return {
      PET_STATUS,
      list: {},
      controls: false,
      mute: false,
      likeCountFilters,
      id: '',
      isPlaying: false,
      previewvisible: false,
      previewIndex: '',
    };
  },
  computed: {
    ...mapGetters(['isLogin']),
  },
  onShow() {
    this.currIndex = 0;
  },
  onLoad(options) {
    this.id = options.id;
    console.log('options', options);
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    previewImage(index) {
      this.previewvisible = true;
      this.previewIndex = index;
    },
    handlePlay() {
      this.isPlaying = true;
    },
    handlePause() {
      this.isPlaying = false;
    },
    handleEnded() {
      this.isPlaying = false;
    },
    togglePlayPause(index) {
      const videoContext = uni.createVideoContext(`video-${index}`);
      if (this.isPlaying) {
        videoContext.pause(); // 暂停视频
      } else {
        videoContext.play(); // 开始播放视频
      }
    },
    onChange(e) {
      const files = this.list.files;
      if (
        this.currIndex !== undefined &&
        files[this.currIndex].type === 'video'
      ) {
        const videoContext = uni.createVideoContext(`video-${this.currIndex}`);
        videoContext.pause();
        // 判断正在展示的是否为视频
        // this.selectComponent('#video_' + this.currIndex).pause();
      }
      this.currIndex = e.detail.current;
      console.log(' this.currIndex', this.currIndex);
      // 判断即将展示的是否为视频
      if (files[e.detail.current].type === 'video') {
        const videoContext = uni.createVideoContext(`video-${this.currIndex}`);
        videoContext.play();
      }
    },
    //待领养 出现领养图标
    toBeAdopt() {
      uni.showToast({
        title: '平台限制，请至附近有喵客户端预约领养',
        icon: 'none',
      });
    },
    async selectSocialContent() {
      try {
        const params = {
          relativeId: this.list.petShelfRecord.id,
          relativeType: '1',
        };
        const { data } = await selectSocialContent(params);
        this.list.petShelfRecord.hasThumbUp = data.hasThumbUp;
      } catch (e) {
        throw new Error(e);
      }
    },
    //点赞
    async add() {
      if (!this.isLogin) {
        uni.navigateTo({
          url: '/pages/login/index',
        });
        return;
      }
      try {
        if (this.list.petShelfRecord.hasThumbUp) {
          await sendCancelLike({
            relativeId: this.list.petShelfRecord.id,
            relativeType: '1',
          });
        } else {
          await sendLike({
            relativeId: this.list.petShelfRecord.id,
            relativeType: '1',
          });
        }
        const isLike = this.list.petShelfRecord.hasThumbUp;
        const newLike = !isLike;
        const total = newLike
          ? ++this.list.petShelfRecord.likeQty
          : this.list.petShelfRecord.likeQty === 0
          ? 0
          : --this.list.petShelfRecord.likeQty;
        this.$set(this.list.petShelfRecord, 'likeQty', total);
        this.$set(this.list.petShelfRecord, 'hasThumbUp', newLike);
      } catch (error) {
        throw new Error(error);
      }
    },
    doMute(index) {
      this.mute = !this.mute;
    },
    async getDetail() {
      try {
        uni.showLoading({
          title: '加载中',
          mask: true,
        });
        const { data } = await fetchShelfDetail(this.id);
        uni.hideLoading();
        data.files = JSON.parse(data.petShelfRecord.files);
        this.list = { ...data };
        this.selectSocialContent();
        console.log('list', this.list);
      } catch (e) {
        uni.hideLoading();
        throw new Error(e);
      }
    },
    onShareAppMessage(res) {
      const status = this.list.petShelfRecord.status;
      const petName = this.list.petShelfRecord.nickName;
      let title = '';
      if (status === PET_STATUS.CLOUD_ADOPT) {
        title = `${petName}被云认养啦，每天看ta的动态，不焦虑了！`;
      } else if (status === PET_STATUS.ADOPT) {
        title = `我已经去拥有新家啦，快来看看我领养后的新生活变化！`;
      } else {
        title = `${petName}已经做好准备啦，期待你带TA回家开启幸福新生活！`;
      }
      return {
        title: title,
        desc: '宠物详情',
        path: `/pages/detail/index?id=${this.id}`,
        imageUrl: this.list.files[0].poster,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .uni-scroll-view-content {
    padding-bottom: 100rpx;
    box-sizing: border-box;
  }
}
.detail {
  .adopt-information {
    position: relative;
    .adopt-all {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: -28px;
      left: 0;
      right: 0;
      .background-icon {
      }
      .avatar {
        position: absolute;
        top: 25px;
      }
    }
    .adopt-days {
      margin-top: 16px;
      position: relative;
      .days-count {
        font-weight: 500;
        font-size: 10px;
        color: #ffffff;
        position: absolute;
        top: 3px;
        left: 27px;
      }
    }
    .adopt-descript {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: -16px;
      .name {
        font-weight: 600;
        font-size: 14px;
        color: #333333;
      }
      .content {
        font-weight: 400;
        font-size: 12px;
        color: #333333;
        margin-top: 3px;
      }
    }
  }

  .swiper-wrapper {
    position: relative;
    top: 0;
    bottom: 0;
    .muteimage {
      position: absolute;
      right: 25px;
      bottom: 18px;
      z-index: 99999 !important;
      width: 30px;
      height: 30px;
    }
    .detail-swiper {
      overflow: hidden;
    }
    .icon-adopt {
      position: absolute;
      right: 0px;
      top: 100rpx;
      z-index: 999;
    }
    .donate-msg {
      position: absolute;
      bottom: 97px;
      // left: 12px;
      width: 100%;
    }
    .right-menu {
      position: absolute;
      right: 15px;
      bottom: 60px;

      .share {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .share-title {
          .share-btn {
            background-color: transparent; /* 设置背景为透明 */
            color: #ffffff;
            font-weight: 500;
            font-size: 12px;
            &::after {
              border: none; /* 移除边框 */
            }
          }
        }
      }
      .love-count {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 22px;
        .count {
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
        }
        .active {
          color: #fd6a1b !important;
        }
      }
    }

    .video-bg {
      .video-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 99999;
        .is-video {
          width: 30px;
          height: 30px;
          background: #00000080;
          border-radius: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .video-cover {
        width: 100%;
        height: 450px;
        position: absolute;
        background-color: transparent;
        z-index: 1000 !important;
      }
      .video {
        width: 100%;
        height: 100%;
        z-index: 999 !important;
        position: absolute;
      }
    }
    // .video-bg {
    //   position: relative;
    //   overflow: hidden;
    //   .muteimage {
    //     position: absolute;
    //     right: 10px;
    //     bottom: 30px;
    //     z-index: 99999 !important;
    //     width: 30px;
    //     height: 30px;
    //   }
    //   .video {
    //     position: relative;
    //     z-index: 2;
    //     width: 100%;
    //     height: 500px;
    //     z-index: 2;
    //   }
    // }
    .image1 {
      z-index: 1;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      filter: blur(30px);
    }
    .image2 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 2;
    }
  }
}
</style>
